<template>
	<!-- 
		布局结构不清晰， 布局前没有进行分析
		没有高度定义
		最外层未定义 内层未定义高度
	 -->
	 <div class="main">
		 
			<div style="height: 40px;">
				<!-- header start -->
				<ly-frow-center class="header">
					<span class="marr title">课程汇总</span>
					<el-select clearable size="mini" v-model="conSelect" placeholder="请选择班级" class="select marl">
					</el-select>
					<el-autocomplete clearable size="mini" suffix-icon="el-icon-search" style="position: relative;left:-10px;"
						v-model="conIndex" placeholder="请输入学生姓名" :trigger-on-focus="false"></el-autocomplete>
				</ly-frow-center>
				<!-- header end -->
			</div>
		
		<div class="content" style="height: 96%;">
			
				<!-- 选择月份 start -->
				<ly-fbetween style="height: 50px;">
					<ly-frow-center>
						<el-button type="text" @click="getDate(1)" style="margin: 0 20px 0 44px;">上一月</el-button>
						<el-date-picker v-model="date" :clearable="false" @change="montInfo" style="width: 120px;" type="month" > </el-date-picker>
						<el-button type="text" @click="getDate(2)">下一月</el-button>
					</ly-frow-center>
					<ly-frow-center class="marrS">
						<span>总排课时： 65</span>
						<span>总排学生数： 14位</span>
						<span>
							<i class="box-925ff8"></i>
							未结果： 65
						</span>
						<span>已结果：0</span>
						<span>
							<el-button size="mini">按月</el-button>
							<el-button size="mini" style="margin-left: 0;">按日</el-button>
						</span>
					</ly-frow-center>
				</ly-fbetween>
				<!-- 选择月份 end -->
					
				<!-- 主体月份 start -->
				<div style="height: 90%;">
					<ly-scrollbar>
						<ly-flex class="date" v-for="(item,index) in data" :key="index">
							<ly-fcenter class="mont" :class="yellows(item.xq)"> {{item.ri}}号 (周{{item.xq}})</ly-fcenter>
							<ly-frow-center class="userList">
								<ly-flex class="userInfo" v-for="i in item.data" :key="i.assistant">{{i.starttime}}{{i.teachername}}</ly-flex>
							</ly-frow-center>
						</ly-flex>
					</ly-scrollbar>
				</div>
				<!-- 主体月份 end -->
			
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				// 搜索
				conSelect: '',
				conIndex: '',
				
				// 日期模块
				date: '',  // 选择日期
				data: [],  // 内容数据
				
			}
		},
		created() {
			this.getDate();
		},
		methods:{
			getDate(res = ''){
				/**
				 * 加载日期
				 */
				var time = 0;
				if(res == ''){
					var date = new Date()
					time = date.getTime();
					this.date = date
				}else{
					var date = new Date(this.date)
					time = date.getTime()
					const num = (3600 * 1000 * 24 * 30)
					time = res == '1'? time-num: time+num
					this.date = new Date(time)
				}
				
				this.montInfo(time)
			},
			
			
			montInfo(res){
				/**
				 * 获取一个月多少天，并获取月初星期几
				 */
				const daxier = ['一','二','三','四','五','六','日'];
				const date = new Date(res)
				const y = date.getFullYear()
				const m = date.getMonth() + 1
				var date2 = new Date(y,m,0)
				var rq = date2.getDate()  // 日 本月最后一天
				
				var xq = date2.getDay();  // 星期 本月最后一天星期几
				var rq2 = rq % 7
				if(rq2 === 0){
					xq = rq2+1
				}else{
					if( rq2 > xq) xq+=7
					xq = xq - rq2
				}
				
				let self = this
				this.axios.get('http://www.eshareedu.cn/edusystems/api/coursetables/search',{'psize': 99999}).then(list => {  // 参数postman测试无效
					
					
					var data = [];
					for(var i = 1; i<=rq; i++){
						
						let data2 = [];
						list.data.data.list.forEach(item => {
							if(parseInt(item.coursedate.substr(5,2)) == m && parseInt(item.coursedate.substr(8,2)) == i){
								item.starttime = item.starttime.substr(11,5)
								data2.push(item)
							}
						})
						
						data.push({
							'ri': i,
							'xq': daxier[xq],
							'data': data2
						})
						
						xq = (++xq == 7) ? 0 : xq 
					}
					
					console.log(data)
					
					self.data = data
					
					
				})
				
				
				
				// var times = new Date(0) // 月初星期几
				// console.log(times.getDay())
			},
		
		
			yellows(res){
				/**
				 * 计算属性 日历颜色
				 */
				if(res == '六' || res == '日'){
					return 'yellow'
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	.header{
		.title{background-color: white;width: 140px;height: 40px;line-height: 40px;text-align: center;}
	}
	.content{
		background-color: white;padding: 0 20px;
		.box-925ff8{width: 25px;height: 25px;background-color: #925ff8;}
		.date{
			width: 100%;height: 100px;border-top: 1px solid #eee;border-bottom: 1px solid #eee;
			.mont{background-color: #f3f3f3;width: 100px;height: 100px;}
			.userList{width: 100%;height: 100px;padding: 0 10px;}
			.userInfo{padding: 4px 8px;border-left: 5px solid #4281fc;border-radius: 4px;}
			.yellow{background-color: rgb(254, 250, 143);}
		}
	}
	
</style>